<template>
  <div class="app-container">


    <el-dialog title="审核" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="备  注">

          {{credentials.describe1}}
        </el-form-item>
        <el-form-item label="使用前">
          <img :src="credentials.beforeImg"  min-width="250" height="250"/>
        </el-form-item>

        <el-form-item label="使用后">
            <img :src="credentials.afterImg"  min-width="250" height="250"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="save(2)">通过</el-button>
          <el-button type="danger" @click="save(3)">不通过</el-button>
        </el-form-item>
      </el-form>


    </el-dialog>

    <el-table
      :data="list"
      border
      fit
      highlight-current-row
      >

      <el-table-column prop="roomName" label="会议室名称" />

      <el-table-column type="date" prop="cover" label="日期" sortable >
        <template   slot-scope="scope" >
          {{scope.row.sliceDate.substring(0,10)}}
        </template>
      </el-table-column>

      <el-table-column  prop="beginTime" label="开始时间"/>

      <el-table-column  prop="endTime" label="结束时间"/>

      <el-table-column  prop="userName" label="预约人"/>

      <el-table-column  prop="commit" label="申请理由"/>

      <el-table-column type="status" prop="state" label="状态" sortable >
        <template   slot-scope="scope" >
          <el-tag type="success" v-if="scope.row.state==1">正常</el-tag>
          <el-tag type="info" v-else>取消</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="审核凭据" width="200" align="center" prop="sliceId">
        <template slot-scope="scope">
          <el-button v-if="scope.row.credentials == 0" type="danger" size="mini" icon="el-icon-edit" disabled>未上传</el-button>
          <el-button v-else-if="scope.row.credentials == 1" type="info" size="mini" @click="openCheck(scope.row.id)">未审核</el-button>
          <el-button v-else-if="scope.row.credentials == 2" type="success" size="mini"  @click="openCheck(scope.row.id)">已审核</el-button>
          <el-button v-else-if="scope.row.credentials == 3" type="danger" size="mini"  @click="openCheck(scope.row.id)">审核不通过</el-button>
        </template>
      </el-table-column>


      <el-table-column type="date" prop="gmtCreate" label="申请时间" sortable >
        <template   slot-scope="scope" >
          {{scope.row.gmtCreate.substring(0,10)}}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import reservation from "../../api/reservation"
export default{
  data(){
    return{
      list:[{reservation}],//查询后的接口集合
      reservation: {
        id:'',
        userId:'',
        sliceId: '',
        state: '',
        userName:'csp',
        roomName:'',
        gmtCreate:'',
        gmtModified:'',
        isDeleted:'',
      },
      dialogFormVisible:false,
      credentials:{
        id:"",
        reservationId:"",
        userId:"",
        describe1:"",
        beforeImg:"",
        afterImg:"",
      },
      check:{
        id:"",
        isPass:""
      }
    }
  },
  created(){
    this.listAll()
  },
  methods:{

    listAll(){
      reservation.list()
        .then(response=>{
          this.list=response.data.list
        })
    },
    openCheck(id){
      this.dialogFormVisible = true
      this.check.id = id
      reservation.getByReservationId(id)
      .then(response=>{
        this.credentials = response.data.credentials
      })
    },
    save(checked){
      this.check.isPass = checked
      reservation.check(this.check)
      .then(response=>{
        this.$message({
          type:"success",
          message:"审核成功"
        })
        this.dialogFormVisible = false
        this.listAll()
      })
    }
  },
}
</script>
<style>

</style>
